<template>
  <view class="total-container">
    <view class="container">
      <view class="info">
        <view class="left">
          <view class="logo" @click="previewImage('./../../static/logo.png')">
            <u-image
              src="./../../static/logo.png"
              width="120rpx"
              height="120rpx"
              mode="aspectFit"
            ></u-image>
          </view>
        </view>

        <view class="right">
          <view class="top">
            <view class="company-name">软件工作室</view>
            <view
              class="logo"
              @click="
                previewImage(
                  'https://img2.baidu.com/it/u=2444824041,67871580&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500'
                )
              "
            >
              <u-image
                src="https://img2.baidu.com/it/u=2444824041,67871580&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
                width="40rpx"
                height="40rpx"
              ></u-image>
            </view>
          </view>
          <view class="bottom">
            <view>咸阳 · 秦都区</view>
            <view>0-20人</view>
            <view>软件开发</view>
          </view>
        </view>
      </view>
      <view class="location">
        <i class="iconfont icon-dingwei"></i>
        <view class="position"
          >陕西-咸阳-秦都区-陕西工业职业技术学院经开校区</view
        >
      </view>
    </view>

    <view class="content">
      <!-- <u-tabs :list="tabList"></u-tabs> -->

      <view class="introduce">
        <view class="raw">
          <view
            @click="
              previewImage(
                'https://pic.imgdb.cn/item/667b868fd9c307b7e9da4c56.jpg'
              )
            "
            class="image"
            style="
              background-image: url('https://pic.imgdb.cn/item/667b868fd9c307b7e9da4c56.jpg');
            "
          >
            <!-- <u-image
            src="https://p0.itc.cn/q_70/images03/20211021/6ae5704f4c9a40539e0dbc865d6511eb.jpeg"
            mode="heightFix"
          ></u-image> -->
          </view>

          <view class="title">介绍</view>
          <view class="text">
            软件工作室--位于崇理F208，作为一只充满活力和创造的团队，我们致力于用创新和技术来解决现实生活中的问题，并且不断追求卓越。我们的团队由四位资历高深的老师以及拥有热情和想法的学生们组成，这使得我们可以在大学里面探索和发现自己的技能和潜力，并将其付诸于实践。
          </view>
        </view>

        <view
          @click="
            previewImage(
              'https://pic.imgdb.cn/item/667b81a6d9c307b7e9d287ba.jpg'
            )
          "
          class="image"
          style="
            background-image: url('https://pic.imgdb.cn/item/667b81a6d9c307b7e9d287ba.jpg');
          "
        >
          <!-- <u-image
            src="https://p0.itc.cn/q_70/images03/20211021/6ae5704f4c9a40539e0dbc865d6511eb.jpeg"
            mode="heightFix"
          ></u-image> -->
        </view>

        <view class="raw">
          <view class="title"></view>
          <view class="text">
            如果你对编程或软件开发感兴趣，并且想要学习更多的知识并接触实际项目，那么欢迎加入我们的团队。
          </view>
        </view>

        <view
          @click="
            previewImage(
              'https://pic.imgdb.cn/item/667b87a6d9c307b7e9dbe48d.jpg'
            )
          "
          class="image"
          style="
            height: 1120rpx;
            background-image: url('https://pic.imgdb.cn/item/667b87a6d9c307b7e9dbe48d.jpg');
          "
        >
          <!-- <u-image
            src="https://5b0988e595225.cdn.sohucs.com/images/20180506/00d66b681cca4e5d8f4a7c0f734c1692.jpeg"
            mode="heightFix"
          ></u-image> -->
        </view>

        <view class="raw">
          <view class="title">关于我们</view>
          <view class="text"
            >我们的工作室是由一群热爱技术的年轻人组成，我们有着丰富的经验和技术实力。在这里，你可以学习到最新的技术，结交志同道合的朋友，参与各种有趣的项目，拥有丰富的经验和成长的机会。</view
          >
        </view>

        <view
          @click="
            previewImage(
              'https://pic.imgdb.cn/item/667b871ed9c307b7e9db2675.jpg'
            )
          "
          class="image"
          style="
            height: 774rpx;
            background-image: url('https://pic.imgdb.cn/item/667b871ed9c307b7e9db2675.jpg');
          "
        >
          <!-- <u-image
            src="https://5b0988e595225.cdn.sohucs.com/images/20180922/83676d36c7a64ff18c23b4a92127523d.jpeg"
            mode="heightFix"
          ></u-image> -->
        </view>

        <view class="raw">
          <view class="title"></view>
          <view class="text"
            >我们的目标是写出色的代码不断创新，以推动技术和社会的不断进步。</view
          >
        </view>

        <view
          @click="
            previewImage(
              'https://pic.imgdb.cn/item/667b88bad9c307b7e9dd8350.png'
            )
          "
          class="image"
          style="
            height: 778rpx;
            background-image: url('https://pic.imgdb.cn/item/667b88bad9c307b7e9dd8350.png');
          "
        >
          <!-- <u-image
            src="https://inews.gtimg.com/newsapp_bt/0/13391054345/1000"
            mode="heightFix"
          ></u-image> -->
        </view>

        <view class="raw">
          <view class="title">招新对象</view>
          <view class="text"
            >我们的团队拥有多个项目，包括Web开发、移动应用程序、Java后端等多个领域。无论你是前端开发、后端开发、移动应用程序开发，我们都欢迎你的加入！</view
          >
        </view>

        <view
          @click="
            previewImage(
              'https://pic.imgdb.cn/item/667b86ffd9c307b7e9daf975.jpg'
            )
          "
          class="image"
          style="
            background-image: url('https://pic.imgdb.cn/item/667b86ffd9c307b7e9daf975.jpg');
          "
        >
          <!-- <u-image
            src="https://0.rc.xiniu.com/g1/M00/3F/47/CgAGTFeSWtSAVzpTAAO2eceLvfo619.jpg"
            mode="heightFix"
          ></u-image> -->
        </view>

        <view class="raw">
          <view class="title">团队文化</view>
          <view class="text"
            >我们注重团队文化和成员的个人发展。我们定期举办技术分享会和其他有趣的活动，让团队成员之间更好地相互了解沟通，提升团队协作和凝聚力。</view
          >
        </view>

        <view
          @click="
            previewImage(
              'https://pic.imgdb.cn/item/667b86d8d9c307b7e9dabbf0.jpg'
            )
          "
          class="image"
          style="
            background-image: url('https://pic.imgdb.cn/item/667b86d8d9c307b7e9dabbf0.jpg');
          "
        >
          <!-- <u-image
            src="https://img.36krcdn.com/20210617/v2_4dbbee84e67e498b8655f72540af2534_img_jpg"
            mode="heightFix"
          ></u-image> -->
        </view>

        <view class="raw">
          <view class="title"></view>
          <view class="text"
            >如果你想加入我们的团队，欢迎联系我们了解更多信息，加入我们，一切探索未知，创造出更多的战绩！</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { previewImage } from "@/utils/tool.js";
const tabList = ref([
  {
    name: "基本简介",
  },
  {
    name: "关于我们",
    badge: {
      // 可以通过在列表对象中加入badge来设置徽标。
      isDot: true, // 显示红点
    },
  },
  {
    name: "招新对象",
  },
  {
    name: "团队文化",
  },
]);
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.total-container {
  background-color: #f1f1f1;

  // reference：参考
  .container {
    width: 100%;
    padding: 30rpx 20rpx;
    background-color: #fff;

    .info {
      width: 100%;

      display: flex;

      .left {
        margin-right: 20rpx;
      }

      .right {
        padding: 10rpx 0;

        .top {
          display: flex;
          align-items: center;
          .company-name {
            font-size: 40rpx;
            font-weight: 900;
          }
          .logo {
            margin-left: 15rpx;
          }
        }
      }

      .bottom {
        display: flex;

        view {
          // margin-right: 20rpx;
          padding-right: 20rpx;
          padding-left: 20rpx;
          border-right: 1px solid #ccc;
          font-size: 26rpx;
          margin-top: 15rpx;
          color: #6c6c6c;
        }

        view:first-child {
          padding-left: unset;
        }

        view:last-child {
          border: unset;
        }
      }
    }

    .location {
      display: flex;
      margin-top: 30rpx;
      padding-left: 20rpx;
      align-items: center;

      .position {
        margin-left: 15rpx;
        font-size: 24rpx;
        color: #646464;
      }
    }
  }

  .content {
    margin-top: 15rpx;
    background-color: #fff;

    .introduce {
      padding: 20rpx 40rpx;
      padding-bottom: 40rpx;

      .raw {
        .title {
          font-size: 36rpx;
          font-weight: 900;
        }
        .text {
          font-size: 29rpx;
          line-height: 40rpx;
          color: #5f5f5f;
          text-indent: 2em;
        }
      }

      .image {
        display: flex;
        // align-items: center;
        // justify-content: center;
        margin: 20rpx 0;
        width: 100%;
        height: 400rpx;
        background-size: cover;
        border-radius: 15rpx;
      }
    }
  }
}
</style>
